<script setup>
import {exportAnswerListExcelApi, getSurveysSubmitListApi} from "../../apis/SurveysApi.js";
import {Message} from "@arco-design/web-vue";
import {onMounted, ref} from "vue";
import {getAnswerSheetApi} from "../../apis/AnswerApi.js";
import __ from 'lodash'
import PreviewAnswerSheet from "../preview/PreviewAnswerSheet.vue";

const props = defineProps({
    surveyId:{
        type:String,
        required:true
    }
})
const showDetail = ref(false)
const isLoading = ref(true)
const answerSheet = ref({})
const getDetailIsLoad = ref(false)
//当前打开的答卷用户
const currentUserName = ref('')
const submitList = ref([])
const exportLoading = ref(false)
const exportExcel = async () => {
    exportLoading.value = true
    await exportAnswerListExcelApi(props.surveyId);
    exportLoading.value = false
}
async function getSubmitList() {
    isLoading.value = true
    const res = await getSurveysSubmitListApi(props.surveyId)
    isLoading.value = false
    if (res.code === 0){
        submitList.value = res.data
    }else{
        Message.error(res.message)
    }
}
const goDetail = async (data) => {
    getDetailIsLoad.value = true
    currentUserName.value = data.userName
    const res = await getAnswerSheetApi(data.id)
    if (res.code === 0){
        answerSheet.value = res.data
        //将多选题 json字符串转为 对象
        for (let i = 0; i < answerSheet.value.questions.length; i++) {
            let question = answerSheet.value.questions[i]
            if (question.type === 1 && !__.isEmpty(question.value)){
                question.value = JSON.parse(question.value)
            }
            //评分转为数字
            if (question.type === 4){
                //字符串转数字
                if (__.isString(question.value)){
                    console.log('是字符串')
                    question.value = Number(question.value)
                }else{
                    question.value = Number(question.value)
                }
            }
        }
        showDetail.value = true
    }else{
        Message.error(res.message)
    }
    getDetailIsLoad.value = false
}
onMounted(async () => {
    await getSubmitList(props.surveyId)
})
</script>

<template>
    <a-button type="primary" class="mb-3 ml-4"
              :disabled="isLoading"
              @click="exportExcel" :loading="exportLoading"> 导出Excel</a-button>
    <a-button type="primary" class="mb-3 ml-4"
              :disabled="isLoading"
              @click="getSubmitList()" > 刷新</a-button>
    <a-table :data="submitList" :loading="isLoading">
        <template #columns>
            <a-table-column title="提交编号" data-index="id"></a-table-column>
            <a-table-column title="问卷id" data-index="surveyId"></a-table-column>
            <a-table-column title="提交用户" >
                <template #cell="{ record }">
                     <p>{{record.userName ? record.userName : '匿名'}}</p>
                </template>
            </a-table-column>

            <a-table-column :sortable="{sortDirections: ['ascend', 'descend']}" title="提交时间" data-index="createTime"></a-table-column>
            <a-table-column title="耗时" >
                <template #cell="{ record }">
                    <p>{{record.submitTime ? record.submitTime + '秒' : '未记录'}}</p>
                </template>
            </a-table-column>
            <a-table-column title="浏览器指纹" data-index="fingerprint"></a-table-column>


            <a-table-column title="操作" :width="240">
                <template #cell="{ record }">
                    <a-space>
                        <a-button type="primary" @click="goDetail(record)" :loading="getDetailIsLoad">查看</a-button>
                    </a-space>
                </template>
            </a-table-column>
        </template>
    </a-table>


    <a-modal v-model:visible="showDetail" hide-cancel fullscreen>
        <template #title>
            <span class="text-lg font-bold">{{currentUserName}}</span>提交的答卷
        </template>
        <div>
            <PreviewAnswerSheet :surveys="answerSheet"/>
        </div>
    </a-modal>


</template>

<style scoped>

</style>
